import { TableLayout } from '@/components';
import { alarmListPage } from '@/services/alarmMsg';
import { deviceList } from '@/services/deviceMsg';
import { patientList } from '@/services/patientMsg';
import {
  PageContainer,
  ProFormDateTimeRangePicker,
  ProFormSelect,
} from '@ant-design/pro-components';
import { Breadcrumb, DatePicker, message } from 'antd';
import { useRef, useState } from 'react';
import { NavLink } from 'react-router-dom';
import dayjs from 'dayjs';

const DeviceList = () => {
  const tableLayoutRef = useRef<any>(null);
  const [paginationTotal, setPaginationTotal] = useState(0);

  const getTableData = async (params?: any) => {
    const sendParams = {
      ...params,
      startTime: params?.datetimeRange?.length > 0 && dayjs(params?.datetimeRange[0]).format('YYYY-MM-DD HH:mm'),
      endTime: params?.datetimeRange?.length > 1 && dayjs(params?.datetimeRange[1]).format('YYYY-MM-DD HH:mm'),
    };
    delete sendParams.datetimeRange;
    if (sendParams.startTime && sendParams.endTime) {
      const res = await alarmListPage(sendParams);
      if (res?.code === 200) {
        setPaginationTotal(res.total);
        return res.rows;
      }
      return [];
    } else {
      message.warning('请选择日期范围');
      return [];
    }
  };

  const columns: any = [
    // 搜索
    {
      dataIndex: 'patientId',
      hideInTable: true,
      renderFormItem: () => {
        return (
          <ProFormSelect
            name="patientId"
            label="关联患者"
            placeholder="请选择关联患者"
            request={async () => {
              const res = await patientList({
                pageNum: 1,
                pageSize: 1000,
              });
              if (res?.code === 200) {
                return res.rows;
              } else {
                return [];
              }
            }}
            fieldProps={{
              fieldNames: {
                label: 'name',
                value: 'id',
              },
            }}
          />
        );
      },
    },
    {
      dataIndex: 'deviceId',
      hideInTable: true,
      renderFormItem: () => {
        return (
          <ProFormSelect
            name="deviceId"
            label="关联设备"
            placeholder="请选择关联设备"
            request={async () => {
              const res = await deviceList({
                pageNum: 1,
                pageSize: 1000,
              });
              if (res?.code === 200) {
                return res.rows;
              } else {
                return [];
              }
            }}
            fieldProps={{
              fieldNames: {
                label: 'name',
                value: 'id',
              },
            }}
          />
        );
      },
    },
    {
      dataIndex: 'datetimeRange',
      hideInTable: true,
      renderFormItem: () => {
        return (
          <ProFormDateTimeRangePicker
            name="datetimeRange"
            fieldProps={{
              allowClear: false,
              format: 'YYYY-MM-DD HH:mm',
              className: 'custom-date-picker',
              placeholder: ['开始日期', '结束日期'],
            }}
          />
        );
      },
    },
    // 表格
    {
      title: '设备名称',
      dataIndex: 'deviceName',
      hideInSearch: true,
    },
    {
      title: '患者姓名',
      dataIndex: 'patientName',
      hideInSearch: true,
    },
    {
      title: '所属病房',
      dataIndex: 'wardName',
      hideInSearch: true,
    },
    {
      title: '所属病床',
      dataIndex: 'bedCode',
      hideInSearch: true,
    },
    {
      title: '报警时间',
      dataIndex: 'createTime',
      hideInSearch: true,
    },
    {
      title: '报警内容',
      dataIndex: 'msg',
      hideInSearch: true,
      width: '26%',
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      width: 120,
      fixed: 'right',
      render: (_: any, record: any) => (
        <div className="custom-table-option">
          <a onClick={() => handleOption(record, 'view')}>查看报警</a>
        </div>
      ),
    },
  ];

  // 操作栏操作
  const handleOption = (row: any, key: string) => {
    if (key === 'view') {
      window.open(`/personalHomePage?alarmId=${row.id}`);
    }
  };
  return (
    <PageContainer
      header={{
        title: <></>,
        ghost: true,
        breadcrumbRender: (route: any) => {
          return (
            <Breadcrumb
              items={[
                {
                  title: (
                    <div
                      style={{
                        display: 'flex',
                        alignContent: 'center',
                      }}
                    >
                      <NavLink to="/alarmMsg">报警日志</NavLink>
                      <div
                        className="ant-breadcrumb-separator"
                        aria-hidden="true"
                      >
                        /
                      </div>
                      <div>报警列表</div>
                    </div>
                  ),
                },
              ]}
            ></Breadcrumb>
          );
        },
      }}
    >
      <TableLayout
        ref={tableLayoutRef}
        getTableData={getTableData}
        headerTitle="报警日志"
        columns={columns}
        rowKey={'id'}
        pagination={{
          total: paginationTotal,
        }}
      />
    </PageContainer>
  );
};

export default DeviceList;
